<template>
  <div>
    <div class="revie-head">
      <div class="drop-down-wrap">
        <el-dropdown split-button type="primary" trigger="click" @click="handleClick1">
          发送数据
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item,index) in downList1"
              :key="index"
              @click.native="select1(item,index)"
            >{{item.label}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="drop-down-wrap">
        <el-dropdown split-button type="primary" trigger="click" @click="handleClick2">
          查看数据
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item,index) in downList2"
              :key="index"
              @click.native="select2(item,index)"
            >{{item.label}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="drop-down-wrap">
        <el-dropdown split-button type="primary" trigger="click" @click="handleClick3">
          数据分析
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item,index) in downList3"
              :key="index"
              @click.native="select3(item,index)"
            >{{item.label}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div class="btns">
        <strong v-for="(item,index) in btns" :key="index">
          <span @click="clickBtn(item,index)">{{item.btn}}</span>
        </strong>
      </div>
    </div>

    <div class="btn1-wrap" v-if="btn1">
      <div class="btn1-part1">
        <span class="btn1-desc">科目级别：</span>
        <input type="text" v-model="input1" class="input1" name="" id="">
        <el-checkbox v-model="checked1">包含上级科目</el-checkbox>
        <span class="btn1-desc">会计月份：</span>
        <el-date-picker v-model="month1" type="month" placeholder="选择月"></el-date-picker> -
        <el-date-picker v-model="month2" type="month" placeholder="选择月"></el-date-picker>
        <el-checkbox v-model="checked2" style="margin-left:20px;">全年汇总</el-checkbox>
      </div>

      <div class="btn1-part2">
        <div class="select-wrap">
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="select-wrap">
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="input-wrap">
          <el-input v-model="input2" placeholder=""></el-input>
        </div>
      </div>
    </div>

    <div class="revie-main">
      <div class="main-head">
        <span>2019年北京化工公司</span>
        <span>货币单位：元</span>
      </div>

      <div class="inner-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
          height="240"
          @selection-change="handleSelectionChange"
          @cell-click="Cell"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb";
export default {
  data() {
    return {
      downList1: [
        {
          label: "lsb",
          id: 0
        },
        {
          label: "hbr",
          id: 1
        },
        {
          label: "aaa",
          id: 2
        },
        {
          label: "bbb",
          id: 3
        }
      ],
      downList2: [
        {
          label: "aaa",
          id: 0
        },
        {
          label: "bbb",
          id: 1
        },
        {
          label: "ccc",
          id: 2
        },
        {
          label: "ddd",
          id: 3
        }
      ],
      downList3: [
        {
          label: "asdas",
          id: 0
        },
        {
          label: "asasfasv",
          id: 1
        },
        {
          label: "aaafsasfasfa",
          id: 2
        },
        {
          label: "bbgassddfgfdb",
          id: 3
        }
      ],
      btn1:false,//显示隐藏查询条件
      input1:'',//科目级别输入框
      checked1:false,//是否包含上级科目
      month1:'',//会计月份开始
      month2:'',//会计月份结束
      checked2:false,//是否全年汇总
      value1:'',//select选框
      value2:'',//select选框
      input2:'',//input输入框
      btn2:false,
      btn3:false,
      btn4:false,
      btn5:false,
      btns: [
        {
          btn: "显示查询条件",
          id: 0
        },
        {
          btn: "生成分析数据",
          id: 1
        },
        {
          btn: "发送至其他项目",
          id: 2
        },
        {
          btn: "打开查询",
          id: 3
        },
        {
          btn: "保存查询",
          id: 4
        },
        {
          btn: "显示分组区域",
          id: 5
        }
      ],

      options1: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],

      options2: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],


      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      multipleSelection: []
    };
  },
  methods: {
    select1(item, index) {
      console.log(item, index);
    },
    handleClick1() {
      alert("发送数据");
    },
    select2(item, index) {
      console.log(item, index);
    },
    handleClick2() {
      alert("查看数据");
    },
    select3(item, index) {
      console.log(item, index);
    },
    handleClick3() {
      alert("数据分析");
    },
    // 
    clickBtn(item,index){
      if(index == 0){
        if(this.btn1){
          item.btn = '显示查询条件'
          this.btn1 = false
        }else{
          item.btn = '隐藏查询条件'
          this.btn1 = true
        }
        
      }
    },
    //选择table
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    Cell(val) {
      console.log(val);
      this.$router.push({
        path: "/auditAnalysisPage/accountAnalysis/accountRevie/id/2"
      });
    }
  },
  components: {
    breadcrumb
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .centent-inner {
    padding: 0 20px 20px 20px;
  }
}
.revie-head {
  display: flex;
  align-items: center;
  height: 72px;
  & > div {
    margin-right: 20px;
  }
  .btns {
    & > strong {
      margin-right: 20px;
      cursor: pointer;
      & > span:first-child {
        font-size: 14px;
        color: #455f85;
        text-decoration: underline;
      }
    }
  }
}

.btn1-wrap{
  .btn1-desc{
    font-size: 14px;
    color: #333333;
    &:nth-of-type(2){
      margin-left: 40px;
    }
  }
  .btn1-part1{
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .input1{
      width: 280px;
      height: 32px;
      margin-right: 20px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
  }
  .btn1-part2{
    margin-bottom: 20px;
    display: flex;
    .select-wrap{
      margin-right: 20px;
    }
    .input-wrap{
      width: 80px;
    }
  }
}
.revie-main {
  .main-head {
    height: 34px;
    font-size: 16px;
    color: #333333;
    & > span {
      margin-right: 20px;
    }
    & > span:last-child {
      text-align: right;
    }
  }
}
</style>